<template>
  <div class="potentialCustomers">
    <page-header :title="'报表分析'"></page-header>
    <div class="search_area">
      <el-row>
        <el-form :form="queryForm" label-width="0.6rem">
          <el-col :span="8">
            <el-form-item label="时间">
              <el-date-picker
                v-model="queryForm.date"
                style="width: 100%"
                type="month"
                placeholder="选择日期"
                format="yyyy年M月"
                value-format="yyyy-MM"
                @change="queryReport"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <el-card>
      <div class="chart" id="chart"></div>
    </el-card>
  </div>
</template>
<script>
import pageHeader from "@/components/pageHeader.vue";
import * as echarts from 'echarts'
export default {
  name: "potentialCustomers",
  components: {
    pageHeader,
  },
  data() {
    return {
      queryForm: {
        date: "",
      },
      x: [],
      y: [],
      currentMonth: {},
      pickerOptions: {}
    };
  },
  methods: {
    queryReport() {
      this.$post(this.$api.tran.report, this.reqData(this.queryForm.date)).then(
        (res) => {
          if (res.data.code === 200) {
            this.x = [];
            this.y = [];
            let data = res.data.data;
            data.forEach((element) => {
              this.x.push(element.tranStageName);
              this.y.push(element.tranStageCount);
            });
            this.$nextTick(() => {
              this.draw();
            });
            console.log(data);
          } else {
            this.$message.error(res.data.message);
          }
        }
      );
    },
    draw() {
      let dom = document.getElementById("chart");
      if (dom.hasAttribute("_echarts_instance_")) dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom)
      let option = {
        backgroundColor: "#fff",
        title: {
          text: '各阶段交易数量一览图',
          left: '40%'
        },
        grid: {
          top: "25%",
          left: "-5%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        animation: false,
        xAxis: [
          {
            type: "category",
            data: this.x,
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#82b0ec",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#82b0ec",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#000",
              },
              margin: 30,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#0c2c5a",
              },
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, -6], // 上部椭圆
            symbolPosition: "end",
            z: 12,
            // "barWidth": "0",
            label: {
              normal: {
                show: true,
                position: "top",
                // "formatter": "{c}%"
                fontSize: 15,
                fontWeight: "bold",
                color: "#34DCFF",
              },
            },
            color: "#2DB1EF",
            data: this.y,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [40, 10],
            symbolOffset: [0, 7], // 下部椭圆
            // "barWidth": "20",
            z: 12,
            color: "#2DB1EF",
            data: this.y,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: function (d) {
              return d > 0 ? [50, 15] : [0, 0];
            },
            symbolOffset: [0, 12], // 下部内环
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#2EA9E5",
                borderType: "solid",
                borderWidth: 1,
              },
            },
            data: this.y,
          },
          
          {
            type: "bar",
            //silent: true,
            barWidth: "40",
            barGap: "10%", // Make series be overlap
            barCateGoryGap: "10%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: "#38B2E6",
                  },
                  {
                    offset: 1,
                    color: "#0B3147",
                  },
                ]),
                opacity: 0.8,
              },
            },
            data: this.y,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  mounted() {
    let month =
      new Date().getMonth() + 1 > 10
        ? new Date().getMonth() + 1
        : "0" + (new Date().getMonth() + 1);
    this.currentMonth = {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    };
    this.queryForm.date = new Date().getFullYear() + "-" + month;
    let that = this;
    this.pickerOptions = {
      disabledDate(time) {
        let month = time.getMonth() + 1
        return (month > that.currentMonth.month && time.getFullYear() >= that.currentMonth.year) || (time.getFullYear() > that.currentMonth.year)
      }
    }
    this.queryReport();
  },
};
</script>
<style lang="less" scoped>
.potentialCustomers {
  background: #fff;
  overflow: hidden;
  padding: 0 0.24rem;
  padding-bottom: 0.15rem;
  #chart {
    margin-top: 0.15rem;
    height: 5rem;
    width: 100%;
  }
}
</style>